<template>
    <div>    
        <am-header>    
        </am-header>
        <am-container id="app">      
            <router-view/>
        </am-container>    
    </div>
</template>

<script lang='ts'>
import Vue from 'vue'
import Component from 'vue-class-component'

@Component({
  components:{
  }
})
export default class App extends Vue{
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.am-layout {
    display: flex;
    flex-direction: column;
    /* color: #fff; */
    padding: 0;
    margin: auto;
}
.horizontal {
    flex-direction: row;
}
.am-header {
    /* text-align: center; */
    /* line-height: 65px; */
    /* background-color: #444; */
}
.am-aside {
    /* width: 200px; */
    /* background-color: #777; */
    /* line-height: 360px; */
    /* text-align: center; */
}
.am-main {
    flex: 1;
    /* background-color: #666;
    line-height: 320px; */
    /* text-align: center; */
}
.am-footer {
    /* background-color: #555;
    line-height: 40px;
    text-align: center; */
}
</style>
